<template>
  <div class="not-found-page">
    <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 200px;">
      <img src="@/assets/images/notfound.png" alt="" width="200">
      <div class="not-found">
        <div class="not-found__404">抱歉，页面暂时无法访问</div>
        <div class="not-found__desc">
          <p>可能有以下原因：</p>
          <p>网址错误：请检查地址是否完整或存在多余字符</p>
          <p>网络问题：请检查网络是否已连接</p>
          <p>网址失效：可能页面已被删除</p>
        </div>
        <el-button type="info" @click="$router.push('/')">回到首页</el-button>
        <el-button type="primary" @click="$router.back()">返回上一页</el-button>
      </div>
    </div>
  </div>
</template>


<style lang='scss' scoped>
html.dark {
  img {
    filter: invert(0.5);
  }
}
.not-found-page {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.not-found {
  //margin-bottom: 200px;
  margin-left: 100px;
}
.not-found__404 {
  font-size: 20px;
}
.not-found__desc {
  margin: 30px 0;
  color: #606266;
  font-size: 14px;
  p {
    line-height: 2.5em;
  }
}
.el-button {
  width: 150px;
  letter-spacing: 0.1em;
}
</style>
